<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
<t:base type="jquery,easyui,tools,DatePicker"></t:base>

<html>
<head>
	<style>
		.courseTable .header td{			
			text-align:center;
			padding:0;
			margin:0;		
			
		}
		
		.courseTime{
			width:40px;
		}
		
		.courseTable{
			border:2px solid black;
			border-collapse:collapse;
			width:100%;			
		}
		.courseTable td{
			border:1px solid black;	
			text-align:center;
			font-size:14px;
			min-height:60px;
		}
		.out{
			border-top:40px #D6D3D6 solid;/*上边框宽度等于表格第一行行高*/
			width:0px;/*让容器宽度为0*/
			height:0px;/*让容器高度为0*/
			border-left:80px #BDBABD solid;/*左边框宽度等于表格第一行第一格宽度*/       
			position:relative;/*让里面的两个子容器绝对定位*/
		}
		b{font-weight:normal; font-style:normal;display:block;position:absolute;top:-40px;left:-40px;width:35px;}
		em{font-style:normal;display:block;position:absolute;top:-25px;left:-70px;width:55x;}      
		
		.spanLabel{
			vertical-align:middle;display:-moz-inline-box;display:inline-block;margin-left:15px;text-align:right;text-overflow:ellipsis;-o-text-overflow:ellipsis; overflow: hidden;white-space:nowrap;
		}
	</style>
</head>
<body>

	<div id="dictGroupListtb" style="padding:3px; height: auto" class="datagrid-toolbar">
		<div name="searchColums" style="  height: 30px; line-height: 30px;">
		<input id="_sqlbuilder" name="sqlbuilder" type="hidden">
		<form id="dictGroupListForm">		
			<span class="spanLabel">学期：</span>
				<select style="width:80px;" name="semester" id="semester"></select>
			<span class="spanLabel">周次：</span><select style="width:60px;" name="weekNumber" id="weekNumber"></select>				
			<span class="spanLabel">班级：</span><input  type="text" name="className" id="className" class="inuptxt" style="width: 150px">
			<span  class="spanLabel">任课教师：</span><input  type="text" id="realName" name="teacher.realName" class="inuptxt" style="width: 100px">
			<span  class="spanLabel">实验项目：</span><input  type="text" id="itemName"  class="inuptxt" style="width: 100px">			
			<span style="margin-left: 10px;">
				<a href="javascript:void(0)" style="margin-right: 10px;" class="easyui-linkbutton l-btn" iconcls="icon-search" onclick="dictGroupListsearch()" id="">查询</a>
				<a href="javascript:void(0)" class="easyui-linkbutton l-btn" iconcls="icon-reload" onclick="searchReset()" id="">重置</a> 
			</span>
		</form>
		</div>		
  	</div>

	<table class="courseTable" id="courseTable">
		<!-- 第一行 -->
		<tr class="courseHeader">
			<td style="width:80px;">
				<div class="out">
					<b>星期</b>
					<em>节次</em>
				</div>
			</td>
			<td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td>
		</tr>
	 
	</table>
	
	<script>
	
		$(document).ready(function(){
			initQueryInput();
			initTable();
			dictGroupListsearch();
		});
		
		function initQueryInput(){
			var weekNumber = $('#weekNumber');
			for(var i=1;i<=18;i++){
				if(i==1){
					weekNumber.append("<option selected value='"+i+"'>"+i+"</option>");	
				}else{
					weekNumber.append("<option value='"+i+"'>"+i+"</option>");	
				}
			}
			
			var semester = $('#semester');
			for(var i=1;i<=10;i++){
				var name = 2014+i;				
				semester.append("<option value='"+name+"1'>"+name+"1</option>");
				semester.append("<option value='"+name+"2'>"+name+"2</option>");
				semester.append("<option value='"+name+"3'>"+name+"3</option>");
			}
		}
	
		function initTable(){
			for(var i =1;i<=7;i++){		
				var html = '<tr class="courseRow">'+
				'<td class="courseTime">第'+i+'节</td>';
				
				for(var j=1;j<= 5;j++){
					html += ('<td class="courseTableValueTD" id="'+i+"_"+j+'"><br><br><br></td>');
				}
				
				html +='</tr>';
				$('#courseTable').append(html);		
			}
		}
		
		function setVal(courseName,weekNumber,startCourse,endCourse){
			var content = $('#'+startCourse+"_"+weekNumber).html();
			if(content == '<br><br><br>'){
				$('#'+startCourse+"_"+weekNumber).html(courseName);
			}else{
				$('#'+startCourse+"_"+weekNumber).append(courseName);
			}
			
			
			var count = 0;
			for(var i=startCourse+1;i<=endCourse;i++){
				$('#'+i+"_"+weekNumber).remove();
				count++;
			}
			
			$('#'+startCourse+"_"+weekNumber).attr("rowSpan",1+count);
		}
		
		
		function dictGroupListsearch(){
			$.ajax({
				url:"teachCourseScheduleController.do?datagridNoPage&field=id,weekNumber,semester,week,courseOrderEnd,weekNumber,className,courseDate,courseOrder,peopleCount,lessonInfo.lessonName,teachItem.itemName,teacher.realName,lab.name",
				type:"post",
				data:{
					page:1,
					rows:10,
					semester:$('#semester').val(),
					weekNumber:$('#weekNumber').val(),
					'teacher.realName':$('#realName').val(),
					className:$('#className').val(),
					'teachItem.itemName':$('#itemName').val()
				},
				success:function(data){
					if(window.console)console.log(data);
					
					$('.courseTableValueTD').html('<br><br><br>');
					
					for(var i=0;i<data.rows.length;i++){
						var item = data.rows[i];
						var courseOrderList = item.courseOrder.split(",");
						for(var j=0;j<courseOrderList.length;j++){
							var text = item['lessonInfo.lessonName']+","+item["teachItem.itemName"]+"<br>"+ item.className
							+"<br>"+item['teacher.realName']+"<br>";	
							
							var week = item.week;
							if(week == ''){
								var mydate = new Date(item.courseDate.substring(0,10));
								week = mydate.getDay();
							}
							
							setVal(text,week,courseOrderList[j],courseOrderList[j]);	
						}
						 
					}
				}
			});
		}
		
		/*
		* 查询重置
		*/
		function searchReset(){
			$('#semester').val('');
			$('#weekNumber').val('');
			$('#realName').val('');
			$('#className').val('');
			$('#itemName').val('');
			dictGroupListsearch();
		}
		
		
	</script>
</body>
</html>